<template>
  <div class="my-activities">
    <!-- 搜索区域 -->
    <div class="search-card">
      <el-input
          v-model="data.title"
          placeholder="请输入活动标题查询"
          class="search-input"
          :prefix-icon="Search"
      />
      <el-select v-model="data.activityType" placeholder="活动类型" clearable>
        <el-option label="党课" :value="1" />
        <el-option label="团课" :value="2" />
        <el-option label="主题党日" :value="3" />
        <el-option label="志愿服务" :value="4" />
        <el-option label="其他" :value="5" />
      </el-select>
      <el-select v-model="data.status" placeholder="报名状态" clearable>
        <el-option label="已取消" :value="0" />
        <el-option label="已报名" :value="1" />
        <el-option label="已签到" :value="2" />
      </el-select>
      <el-button type="danger" plain @click="loadMyActivities">查询</el-button>
      <el-button type="danger" plain @click="reset">重置</el-button>
    </div>

    <!-- 数据表格 -->
    <div class="data-card">
      <el-table :data="data.activities" stripe max-height="450">
        <el-table-column prop="activity.title" label="活动标题" min-width="150" show-overflow-tooltip />
        <el-table-column prop="activity.orgType" label="组织类型">
          <template #default="scope">
            <el-tag :type="getOrgTypeTag(scope.row.activity.orgType)">
              {{ getOrgTypeLabel(scope.row.activity.orgType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="activity.activityType" label="活动类型">
          <template #default="scope">
            <el-tag :type="getActivityTypeTag(scope.row.activity.activityType)">
              {{ getActivityTypeLabel(scope.row.activity.activityType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="activity.location" label="地点" width="120" show-overflow-tooltip />
        <el-table-column prop="signupTime" label="报名时间" width="160">
          <template #default="scope">
            {{ formatDateTime(scope.row.signupTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="activity.status" label="活动状态">
          <template #default="scope">
            <el-tag :type="getStatusTag(scope.row.activity.status)">
              {{ getStatusLabel(scope.row.activity.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="报名状态" width="100">
          <template #default="scope">
            <el-tag :type="getSignupStatusTag(scope.row.status)">
              {{ getSignupStatusLabel(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center" fixed="right">
          <template #default="scope">
            <el-button
                type="danger"
                plain
                size="default"
                @click="showActivityDetail(scope.row.activity)"
            >
              查看详情
            </el-button>
            <el-button
                style="margin-right: 10px;margin-top: 5px"
                type="danger"
                plain
                size="default"
                @click="cancelSignup(scope.row)"
                :disabled="!canCancel(scope.row)"
            >
              取消报名
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="data.pageNum"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="data.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="data.total"
        />
      </div>
    </div>
  </div>
  <!-- 添加活动详情对话框 -->
  <el-dialog
      v-model="data.dialogVisible"
      title="活动详情"
      width="600px"
  >
    <div class="activity-detail" v-if="data.currentActivity">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="活动标题">{{ data.currentActivity.title }}</el-descriptions-item>
        <el-descriptions-item label="活动内容">{{ data.currentActivity.content }}</el-descriptions-item>
        <el-descriptions-item label="活动类型">
          <el-tag :type="getActivityTypeTag(data.currentActivity.activityType)">
            {{ getActivityTypeLabel(data.currentActivity.activityType) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="组织类型">
          <el-tag :type="getOrgTypeTag(data.currentActivity.orgType)">
            {{ getOrgTypeLabel(data.currentActivity.orgType) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="活动地点">{{ data.currentActivity.location }}</el-descriptions-item>
        <el-descriptions-item label="开始时间">{{ formatDateTime(data.currentActivity.startTime) }}</el-descriptions-item>
        <el-descriptions-item label="结束时间">{{ formatDateTime(data.currentActivity.endTime) }}</el-descriptions-item>
        <el-descriptions-item label="报名截止时间">{{ formatDateTime(data.currentActivity.signupDeadline) }}</el-descriptions-item>
        <el-descriptions-item label="参与人数">
          {{ data.currentActivity.currentParticipants }}/{{ data.currentActivity.maxParticipants }}
        </el-descriptions-item>
        <el-descriptions-item label="活动状态">
          <el-tag :type="getStatusTag(data.currentActivity.status)">
            {{ getStatusLabel(data.currentActivity.status) }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.dialogVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import request from '@/utils/request'
import {getUserInfo} from "@/utils/auth";

const data = reactive({
  title: '',
  activityType: '',
  status: '',
  activities: [],
  pageNum: 1,
  pageSize: 10,
  total: 0,
  user: getUserInfo() || {},
  dialogVisible: false,
  currentActivity: {}
})

// 获取我的活动
const loadMyActivities = () => {
  request.get('/activitySignup/selectMyPage', {
    params: {
      userId: data.user.id,
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      title: data.title,
      activityType: data.activityType,
      status: data.status
    }
  }).then(res => {
    if (res.code === '200') {
      data.activities = res.data.list
      data.total = res.data.total
    }
  })
}

const showActivityDetail = (activity) => {
  data.currentActivity = activity
  data.dialogVisible = true
}
// 重置搜索条件
const reset = () => {
  data.title = ''
  data.activityType = ''
  data.status = ''
  data.pageNum = 1
  loadMyActivities()
}

// 分页方法
const handleSizeChange = (val) => {
  data.pageSize = val
  loadMyActivities()
}

const handleCurrentChange = (val) => {
  data.pageNum = val
  loadMyActivities()
}
// 获取活动类型标签文本
const getActivityTypeLabel = (type) => {
  const types = {
    1: '党课',
    2: '团课',
    3: '主题党日',
    4: '志愿服务',
    5: '其他'
  }
  return types[type] || '未知'
}

// 获取活动类型标签样式
const getActivityTypeTag = (type) => {
  const tags = {
    1: 'danger',
    2: 'warning',
    3: 'success',
    4: 'info',
    5: ''
  }
  return tags[type] || ''
}

// 获取组织类型标签文本
const getOrgTypeLabel = (type) => {
  const types = {
    1: '党组织',
    2: '团组织'
  }
  return types[type] || '未知'
}

// 获取组织类型标签样式
const getOrgTypeTag = (type) => {
  const tags = {
    1: 'danger',
    2: 'warning'
  }
  return tags[type] || ''
}

// 获取活动状态标签文本
const getStatusLabel = (status) => {
  const statuses = {
    0: '已取消',
    1: '未开始',
    2: '进行中',
    3: '已结束'
  }
  return statuses[status] || '未知'
}

// 获取活动状态标签样式
const getStatusTag = (status) => {
  const tags = {
    0: 'info',
    1: 'warning',
    2: 'success',
    3: 'danger'
  }
  return tags[status] || ''
}

// 获取报名状态标签文本
const getSignupStatusLabel = (status) => {
  const statusMap = {
    0: '已取消',
    1: '已报名',
    2: '已签到'
  }
  return statusMap[status] || '未知'
}

// 获取报名状态标签样式
const getSignupStatusTag = (status) => {
  const tagMap = {
    0: 'info',
    1: 'success',
    2: 'warning'
  }
  return tagMap[status] || ''
}

// 格式化日期时间
const formatDateTime = (dateStr) => {
  if (!dateStr) return ''
  return dateStr.substring(0, 16).replace('T', ' ')
}

// 判断是否可以取消报名
const canCancel = (row) => {
  // 只有在已报名且活动未开始的情况下才能取消
  return row.status === 1 &&
      row.activity.status === 1 &&
      new Date() < new Date(row.activity.startTime)
}

// 取消报名
const cancelSignup = (row) => {
  ElMessageBox.confirm('确定要取消报名吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    request.post(`/activitySignup/cancel/${row.id}`, null, {
      params: {
        userId: data.user.id
      }
    }).then(res => {
      if (res.code === '200') {
        ElMessage.success('取消报名成功')
        loadMyActivities()
      } else {
        ElMessage.error(res.msg)
      }
    })
  })
}
loadMyActivities()

</script>
<style scoped>
/* 容器和卡片基础样式 */
.my-activities {
  padding: 20px;
  width: 100%;
  overflow-x: hidden;  /* 防止页面横向滚动 */
}

.search-card,
.data-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.search-card {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

/* 搜索和按钮组件 */
.search-input {
  width: 300px;
}

.button-group {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

/* 分页样式 */
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* Element Plus 主题定制 */
:deep(.el-form-item__content),
:deep(.el-date-picker),
:deep(.el-textarea),
:deep(.el-date-editor.el-input),
:deep(.el-date-editor--datetimerange) {
  width: 100%;
}

:deep(.el-tag) {
  text-align: center;
  min-width: 60px;
}

:deep(.el-table) {
  --el-table-header-bg-color: #fff5f5;
}


:deep(.el-button--danger) {
  --el-button-bg-color: #c8161d;
  --el-button-border-color: #c8161d;
  --el-button-hover-bg-color: #e54b4b;
  --el-button-hover-border-color: #e54b4b;
  --el-button-active-bg-color: #c8161d;
  --el-button-active-border-color: #c8161d;
  --el-button-text-color: #fff;
}

:deep(.el-button--danger.is-plain) {
  --el-button-bg-color: #fff;
  --el-button-border-color: #c8161d;
  --el-button-text-color: #c8161d;
  --el-button-hover-text-color: #c8161d;
  --el-button-hover-bg-color: #fff5f5;
  --el-button-hover-border-color: #e54b4b;
  --el-button-active-bg-color: #fff5f5;
  --el-button-active-text-color: #c8161d;
}




/* 分页组件主题色 */
:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background-color: #c8161d;
}

/* 表格样式优化 */
:deep(.el-table th) {
  font-weight: bold;
  color: #333;
  background-color: var(--el-table-header-bg-color);
}

:deep(.el-table td) {
  padding: 8px 0;
}

/* 表格按钮样式 */
:deep(.el-table .el-button) {
  opacity: 1 !important;  /* 确保按钮文字始终可见 */
  visibility: visible !important;
}

/* 标签样式 */
:deep(.el-tag) {
  padding: 0 8px;
  height: 24px;
  line-height: 24px;
  border-radius: 4px;
}

/* 按钮动画效果 */
:deep(.el-button) {
  transition: all 0.3s;
}

:deep(.el-button:not(.el-button--link):active) {
  transform: scale(0.98);
}

/* 链接按钮特定样式 */
:deep(.el-button--link) {
  transition: opacity 0.3s;
  padding: 4px 8px;
  height: auto;
}

:deep(.el-button--link:hover) {
  opacity: 0.8;
}

:deep(.el-button--link:active) {
  transform: none;
}

/* 链接按钮禁用状态 */
:deep(.el-button--link.is-disabled) {
  opacity: 0.5;
}

/* 表格固定列样式 */
:deep(.el-table .el-table__fixed-right) {
  height: 100% !important;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .search-card {
    flex-wrap: wrap;
  }

  .search-input {
    width: 100%;
  }

  :deep(.el-select) {
    width: calc(50% - 5px);
  }

  .el-button {
    flex: 1;
  }
}

@media screen and (max-width: 1200px) {
  :deep(.el-table) {
    width: 100%;
    overflow-x: auto;
  }

  :deep(.el-table__body-wrapper) {
    overflow-x: auto;
  }
}

</style>
